<template>
	<view>
		<view class="cu-modal" v-if="hide" :class="hide==true?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">正在下载</view>
				</view>
				<view class="padding-sm bg-white">
					<view class="flex margin-top" style="flex-direction: column;">
						<view class="cu-progress round">
							<view class="bg-blue" :style="[{ width: rogress + '%'}]"></view>
						</view>
						<text class="margin-left"
							:style="[{ left: (rogress > 5 ? (rogress - 5) : rogress) + '%'}]">{{ rogress }}%</text>
						<view class="dltext">
							新版本正在下载，请耐心等待！
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			// 监听state中属性值的改变
			...mapState({
				hide: state => state.hide,
				rogress: state => state.rogress,
			})
		},
	}
</script>

<style lang="less">
	.dltext {
		width: 100%;
		margin-top: 20rpx;
		text-align: center;
		color: #8a8a8a;
	}

	.cu-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999999;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.bg-blue {
		background: #46c69a;
		height: 100%;
		// border-radius: 15rpx;
	}

	.cu-dialog {
		// background: #46c69a;
		background: #ffffff;
		width: 80%;
		// height: 150rpx;
		// border: ;
		border-radius: 10rpx;
		padding: 10rpx;
		box-shadow: 0rpx 0rpx 10rpx 1px #46c69a30;

		.cu-bar {
			height: 30rpx;
			padding-bottom: 15rpx;

			.content {
				width: 100%;
				font-size: 30rpx;
				font-family: serif, '微软雅黑';
				font-weight: 400;
				text-align: center;
				// color: #46c69a;
			}
		}

		.padding-sm {
			padding: 10rpx;
			box-sizing: border-box;
		}

		.margin-left {
			position: relative;
			color: #46c69a;
		}

		.cu-progress {
			height: 30rpx;
			width: 100%;
			border: 1rpx solid #46c69a;
			border-radius: 15rpx;
			overflow: hidden;
		}
	}
</style>
